<template>
  <div>
    <!-- 轮播图 -->
    <div class="section">
      <el-carousel height="750px" autoplay loop>
        <el-carousel-item v-for="(item, index) in imgs" :key="index">
          <img :src="item.url" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- Hero/Intro Slider End -->

    <!-- 三个商品 -->
    <div class="section pb-100px pt-100px">
      <div class="container">
        <!-- Banners Start -->
        <div class="row">
          <!-- Banner Start -->
          <div
            class="col-lg-4 col-12 mb-md-30px mb-lm-30px"
            data-aos="fade-up"
            data-aos-delay="200"
          >
            <div class="banner-2">
              <img src="@/assets/images/banner/gg1.jpg" alt="" />
              <div class="info justify-content-start">
                <div class="content align-self-center">
                  <router-link to="/shop/shopping" class="shop-link"
                    >Shop Now</router-link
                  >
                </div>
              </div>
            </div>
          </div>
          <!-- Banner End -->

          <!-- Banner Start -->
          <div
            class="col-lg-4 col-12 mb-md-30px mb-lm-30px"
            data-aos="fade-up"
            data-aos-delay="400"
          >
            <div class="banner-2">
              <img src="@/assets/images/banner/gg2.jpg" alt="" />
              <div class="info justify-content-start">
                <div class="content align-self-center">
                  <router-link to="/shop/shopping" class="shop-link"
                    >Shop Now</router-link
                  >
                </div>
              </div>
            </div>
          </div>
          <!-- Banner End -->

          <!-- Banner Start -->
          <div class="col-lg-4 col-12" data-aos="fade-up" data-aos-delay="600">
            <div class="banner-2">
              <img src="@/assets/images/banner/gg3.jpg" alt="" />
              <div class="info justify-content-start">
                <div class="content align-self-center">
                  <router-link to="/shop/shopping" class="shop-link"
                    >Shop Now</router-link
                  >
                </div>
              </div>
            </div>
          </div>
          <!-- Banner End -->
        </div>
        <!-- Banners End -->
      </div>
    </div>
    <!-- Banner Section End -->

    <!-- 推荐商品切换栏 -->
    <div class="section product-tab-area">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center" data-aos="fade-up">
            <div class="section-title mb-0">
              <h2 class="title">我们的产品</h2>
              <p class="sub-title mb-6">同一天，我们坐在一起，共度美好时光</p>
            </div>
          </div>

          <!-- Tab Start -->
          <div
            class="col-md-12 text-center mb-8"
            data-aos="fade-up"
            data-aos-delay="200"
          >
            <ul class="product-tab-nav nav justify-content-center">
              <li class="nav-item">
                <a
                  class="nav-link active"
                  data-bs-toggle="tab"
                  href="#tab-product-new-arrivals"
                  >新品推荐</a
                >
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  data-bs-toggle="tab"
                  href="#tab-product-best-sellers"
                  >畅销书籍</a
                >
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  data-bs-toggle="tab"
                  href="#tab-product-sale-item"
                  >特价商品</a
                >
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  data-bs-toggle="tab"
                  href="#tab-product-on-sales"
                  >随机推荐</a
                >
              </li>
            </ul>
          </div>
          <!-- Tab End -->
        </div>
        <div class="row">
          <div class="col">
            <div class="tab-content">
              <!-- 1st tab start -->
              <div
                class="tab-pane fade show active"
                id="tab-product-new-arrivals"
              >
                <div class="row">
                  <div
                    class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6"
                    data-aos="fade-up"
                    data-aos-delay="200"
                    v-for="(item, index) in newbooks.length >= 8
                      ? newbooks.slice(0, 8)
                      : newbooks"
                    :key="index"
                  >
                    <!-- Single Prodect -->
                    <div class="product">
                      <div class="thumb">
                        <a class="image">
                          <img
                            :src="$store.state.imgURLPre+item.bookImages"
                            alt="Product"
                            @click="goDetail(item.id)"
                            width="313px"
                            height="362px"
                          />
                        </a>
                        <span class="badges">
                          <span class="new">New</span>
                        </span>
                        <div class="actions">
                          <a
                            class="action wishlist"
                            title="Wishlist"
                            @click="addWishList(item.id)"
                          >
                            <i
                              class="el-icon-star-on"
                              v-if="wishList.some((e) => e.id === item.id)"
                            ></i>
                            <i class="el-icon-star-off" v-else></i
                          ></a>
                          <a
                            class="action quickview"
                            data-link-action="quickview"
                            title="Quick view"
                            @click="showInfo(item)"
                            ><i class="icon-size-fullscreen"></i
                          ></a>
                        </div>
                        <button title="Add To Cart" class="add-to-cart" @click="addCart(item.id)">
                          加入购物车
                        </button>
                      </div>
                      <div class="content">
                        <h5 class="title">
                          <a>{{ item.bookTitle }}</a>
                        </h5>
                        <span class="price">
                          <span class="new">￥{{ item.bookNewPrice }}</span>
                          <span class="old">￥{{ item.bookOldPrice }}</span>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 1st tab end -->
              <!-- 2nd tab start -->
               <div
                class="tab-pane fade" 
                id="tab-product-best-sellers"
              >
                <div class="row">
                  <div
                    class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6"
                    data-aos="fade-up"
                    data-aos-delay="200"
                    v-for="(item, index) in selling.length >= 8
                      ? selling.slice(0, 8)
                      : selling"
                    :key="index"
                  >
                    <!-- Single Prodect -->
                    <div class="product">
                      <div class="thumb">
                        <a class="image">
                          <img
                            :src="$store.state.imgURLPre+item.bookImages"
                            alt="Product"
                            @click="goDetail(item.id)"
                            width="313px"
                            height="362px"
                          />
                        </a>
                        <span class="badges">
                          <span class="new">New</span>
                        </span>
                        <div class="actions">
                          <a
                            class="action wishlist"
                            title="Wishlist"
                            @click="addWishList(item.id)"
                          >
                            <i
                              class="el-icon-star-on"
                              v-if="wishList.some((e) => e.id === item.id)"
                            ></i>
                            <i class="el-icon-star-off" v-else></i
                          ></a>
                          <a
                            class="action quickview"
                            data-link-action="quickview"
                            title="Quick view"
                            @click="showInfo(item)"
                            ><i class="icon-size-fullscreen"></i
                          ></a>
                        </div>
                        <button title="Add To Cart" class="add-to-cart" @click="addCart(item.id)">
                          加入购物车
                        </button>
                      </div>
                      <div class="content">
                        <h5 class="title">
                          <a>{{ item.bookTitle }}</a>
                        </h5>
                        <span class="price">
                          <span class="new">￥{{ item.bookNewPrice }}</span>
                          <span class="old">￥{{ item.bookOldPrice }}</span>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 2nd tab end -->
              <!-- 3rd tab start -->
              <div
                class="tab-pane fade" 
                id="tab-product-sale-item"
              >
                <div class="row">
                  <div
                    class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6"
                    data-aos="fade-up"
                    data-aos-delay="200"
                    v-for="(item, index) in specialOffer.length >= 8
                      ? specialOffer.slice(0, 8)
                      : specialOffer"
                    :key="index"
                  >
                    <!-- Single Prodect -->
                    <div class="product">
                      <div class="thumb">
                        <a class="image">
                          <img
                            :src="$store.state.imgURLPre+item.bookImages"
                            alt="Product"
                            @click="goDetail(item.id)"
                            width="313px"
                            height="362px"
                          />
                        </a>
                        <span class="badges">
                          <span class="new">New</span>
                        </span>
                        <div class="actions">
                          <a
                            class="action wishlist"
                            title="Wishlist"
                            @click="addWishList(item.id)"
                          >
                            <i
                              class="el-icon-star-on"
                              v-if="wishList.some((e) => e.id === item.id)"
                            ></i>
                            <i class="el-icon-star-off" v-else></i
                          ></a>
                          <a
                            class="action quickview"
                            data-link-action="quickview"
                            title="Quick view"
                            @click="showInfo(item)"
                            ><i class="icon-size-fullscreen"></i
                          ></a>
                        </div>
                        <button title="Add To Cart" class="add-to-cart" @click="addCart(item.id)">
                          加入购物车
                        </button>
                      </div>
                      <div class="content">
                        <h5 class="title">
                          <a>{{ item.bookTitle }}</a>
                        </h5>
                        <span class="price">
                          <span class="new">￥{{ item.bookNewPrice }}</span>
                          <span class="old">￥{{ item.bookOldPrice }}</span>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 3rd tab end -->
              <!-- 4th tab start -->
               <div
                class="tab-pane fade" 
                id="tab-product-on-sales"
              >
                <div class="row">
                  <div
                    class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6"
                    data-aos="fade-up"
                    data-aos-delay="200"
                    v-for="(item, index) in randomRecommend.length >= 8
                      ? randomRecommend.slice(0, 8)
                      : randomRecommend"
                    :key="index"
                  >
                    <!-- Single Prodect -->
                    <div class="product">
                      <div class="thumb">
                        <a class="image">
                          <img
                            :src="$store.state.imgURLPre+item.bookImages"
                            alt="Product"
                            @click="goDetail(item.id)"
                            width="313px"
                            height="362px"
                          />
                        </a>
                        <span class="badges">
                          <span class="new">New</span>
                        </span>
                        <div class="actions">
                          <a
                            class="action wishlist"
                            title="Wishlist"
                            @click="addWishList(item.id)"
                          >
                            <i
                              class="el-icon-star-on"
                              v-if="wishList.some((e) => e.id === item.id)"
                            ></i>
                            <i class="el-icon-star-off" v-else></i
                          ></a>
                          <a
                            class="action quickview"
                            data-link-action="quickview"
                            title="Quick view"
                            @click="showInfo(item)"
                            ><i class="icon-size-fullscreen"></i
                          ></a>
                        </div>
                        <button title="Add To Cart" class="add-to-cart" @click="addCart(item.id)">
                          加入购物车
                        </button>
                      </div>
                      <div class="content">
                        <h5 class="title">
                          <a>{{ item.bookTitle }}</a>
                        </h5>
                        <span class="price">
                          <span class="new">￥{{ item.bookNewPrice }}</span>
                          <span class="old">￥{{ item.bookOldPrice }}</span>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 4th tab end -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Product tab Area End -->

    <!-- 广告图 -->
    <div class="section pb-100px pt-100px">
      <div class="container-fluid">
        <!-- Banners Start -->
        <div class="row">
          <!-- Banner Start -->
          <div
            class="col-lg-6 col-md-6 col-12 mb-lm-30px"
            data-aos="fade-up"
            data-aos-delay="200"
          >
            <a  class="banner-3">
              <img
                src="@/assets/images/banner/secondary_1.jpg"
                alt=""
                width="570px"
                height="400px"
              />
             
            </a>
          </div>
          <!-- Banner End -->

          <!-- Banner Start -->
          <div
            class="col-lg-6 col-md-6 col-12"
            data-aos="fade-up"
            data-aos-delay="200"
          >
            <a  class="banner-3">
              <img
                src="@/assets/images/banner/secondary_2.jpg"
                alt=""
                width="570px"
                height="400px"
              />
             
            </a>
          </div>
          <!-- Banner End -->
        </div>
        <!-- Banners End -->
      </div>
    </div>
    <!-- Banner Section End -->

    <!-- 新商品 -->
    <div class="section pb-100px">
      <div class="container">
        <!-- section title start -->
        <div class="row">
          <div class="col-md-12" data-aos="fade-up">
            <div class="section-title text-center mb-11">
              <h2 class="title">最新商品</h2>
              <p class="sub-title">同一天，我们坐在一起，共度美好时光</p>
            </div>
          </div>
        </div>
        <!-- 八个商品 -->
        <div class="tab-pane fade show active" id="tab-product-new-arrivals">
          <div class="row">
            <div
              class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6"
              data-aos="fade-up"
              data-aos-delay="200"
              v-for="(item, index) in newbooks.length >= 8
                ? newbooks.slice(0, 8)
                : newbooks"
              :key="index"
              
            >
              <!-- Single Prodect -->
              <div class="product">
                <div class="thumb">
                  <a class="image">
                    <img
                      :src="$store.state.imgURLPre+item.bookImages"
                      alt="Product"
                      @click="goDetail(item.id)"
                      width="313px"
                      height="362px"
                    />
                  </a>
                  <span class="badges">
                    <span class="new">New</span>
                  </span>
                  <div class="actions">
                    <a
                      class="action wishlist"
                      title="Wishlist"
                      @click="addWishList(item.id)"
                    >
                      <i
                        class="el-icon-star-on"
                        v-if="wishList.some((e) => e.id === item.id)"
                      ></i>
                      <i class="el-icon-star-off" v-else></i>
                    </a>
                    <a
                      class="action quickview"
                      data-link-action="quickview"
                      title="Quick view"
                      @click="showInfo(item)"
                      ><i class="icon-size-fullscreen"></i
                    ></a>
                  </div>
                  <button title="Add To Cart" class="add-to-cart" @click="addCart(item.id)">
                    加入购物车
                  </button>
                </div>
                <div class="content">
                  <h5 class="title">
                    <a>{{ item.bookTitle }}</a>
                  </h5>
                  <span class="price">
                    <span class="new">￥{{ item.bookNewPrice }}</span>
                    <span class="old">￥{{ item.bookOldPrice }}</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- New Product End -->
    <el-dialog :visible.sync="dialogVisible" width="50%">
      <div class="modal-body">
        <div class="row">
          <div class="col-md-5 col-sm-12 col-xs-12 mb-lm-30px mb-sm-30px">
            <!-- Swiper -->
            <div class="swiper-container gallery-top mb-4">
              <img
                class="img-responsive m-auto"
                :src="$store.state.imgURLPre+info.bookImages"
                alt=""
              />
            </div>
          </div>
          <div class="col-md-7 col-sm-12 col-xs-12">
            <div class="product-details-content quickview-content">
              <h2>{{ info.bookTitle }}</h2>
              <p class="reference">
                作者:<span>{{ info.bookAuthors }}</span>
              </p>
              <div class="pro-details-rating-wrap">
                <div class="rating-product">
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                  <i class="ion-android-star"></i>
                </div>
                <span class="read-review"
                  ><a class="reviews" href="#"
                    >剩余数量({{ info.bookQuantityInput -info.bookQuantityOutput}})</a
                  ></span
                >
              </div>
              <div class="pricing-meta">
                <ul>
                  <li class="old-price not-cut">￥{{ info.bookNewPrice }}</li>
                </ul>
              </div>
              <p class="quickview-para" v-html="info.bookDescribe"></p>

              <div class="pro-details-quality">
                <div class="cart-plus-minus">
                  <input
                    class="cart-plus-minus-box"
                    type="text"
                    name="qtybutton"
                    value="1"
                    v-model="count"
                  />
                </div>
                <div class="pro-details-cart btn-hover">
                  <button
                    class="add-cart btn btn-primary btn-hover-primary ml-4"
                    @click="addCart(info.id,count)"
                  >
                    添加到购物车
                  </button>
                </div>
              </div>
              <div class="pro-details-wish-com">
                <div class="pro-details-wishlist">
                  <a @click="addWishList(info.id)"><i class="el-icon-star-on" v-if="wishList.some(e=>e.id===info.id)">已收藏</i>
                              <i class="el-icon-star-off" v-else>添加到收藏</i></a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>

<script>
import API from "@/api/request";
const url = "/api/msslyyBook";
export default {
  name: "BookShopHome",

  components: {},

  directives: {},

  data() {
    return {
      dialogVisible: false,
      imgs: [
        { url: require("@/assets/images/banner/8.jpg") },
        { url: require("@/assets/images/banner/7.jpg") },
        { url: require("@/assets/images/banner/1.jpg") },
        { url: require("@/assets/images/banner/3.jpg") },
      ],
      //最新商品
      newbooks: [],
      //热销商品
      selling:[],
      //特价商品
      specialOffer:[],
      //随机商品
      randomRecommend:[],
      info: {},
      user: {},
      wishList: [],
      count:1,
    };
  },
 

  mounted() {},
  created() {
    this.user = sessionStorage.getItem("user1")
      ? JSON.parse(sessionStorage.getItem("user1"))
      : {};
    this.getNewBooks();
    this.getWishList();
    this.getSelling()
    this.getSpecialOffer()
    this.getRandomRecommend()
  },
  methods: {
    //获取热销商品
    getSelling(){
      API.get(url+"/selling").then((res) => {
        if (res.code === "0") {
          this.selling = res.data||[];
        }
      });

    },
    //获取特价商品
    getSpecialOffer(){
      API.get(url+"/specialOffer").then((res) => {
        if (res.code === "0") {
          this.specialOffer = res.data||[];
        }
      });

    },
    //获取随机推荐商品
    getRandomRecommend(){
       API.get(url+"/randomRecommend").then((res) => {
        if (res.code === "0") {
          this.randomRecommend = res.data||[];
        }
      });
    },
    addCart(bookId,cartAmount=1){
      if (this.user.id) {
         API.post(`/api/msslyyCart/addCart/${this.user.id}/${bookId}/${cartAmount}`).then((res) => {
          this.$message({
          type: "success",
          message: "添加成功"
          })
          this.count=1
        
      });
      } else {
        this.$message({
          type: "danger",
          message: "请先登录"
        })
      }
    },
    getWishList() {
      API.get(url + "/getBookListById2/" + this.user.id).then((res) => {
        if (res.data!==null) {
          this.wishList = res.data|| [];
        } else {
          this.wishList=[]
        }
        
      });
    },
    addWishList(bookId) {
      if (sessionStorage.getItem("user1") != null) {
        API.get(`/api/msslyyWishlist/add/${bookId}/${this.user.id}`).then(
          (res) => {
            if (res.code === "0") {
              if (res.data === 1) {
                this.$message({
                  type: "success",
                  message: "收藏成功",
                });
                this.getWishList();
                this.getNewBooks();
              } else {
                this.$message({
                  type: "info",
                  message: "取消收藏成功",
                });
                this.getWishList();
                this.getNewBooks();
              }
            }
          }
        );
      } else {
        this.$message({
          type: "danger",
          message: "请先登录"
        })
      }
    },
    showInfo(item) {
      this.info = item;
      this.dialogVisible = true;
    },
    goDetail(id) {
      this.$router.push("/shop/bookdetail/" + id);
    },
    //获取最新商品
    getNewBooks() {
      API.get(url).then((res) => {
        if (res.code === "0") {
          this.newbooks = res.data;
        }
      });
    },
  },
};
</script>

<style  scoped>
.star{
  font-size: 20px;
}
</style>